<template>
  <div class="user-info">
    <!-- 个人信息 -->
    <el-form label-width="220px">
      <!--手机 -->

      <el-form-item label="手机">
        <el-input
          v-model="userInfo.mobile"
          style="width:220px"
        />
      </el-form-item>

      <!-- 工号 入职时间 -->

      <el-form-item label="入职时间">
        <!--
          el-date-picker 是ele提供的组件
          通过v-model来显示和修改入职时间
        -->
        <el-date-picker
          v-model="userInfo.timeOfEntry"
          type="date"
          class="inputW"
          value-format="yyyy-MM-dd"
        />
      </el-form-item>

      <!-- 员工照片 -->

      <el-form-item label="员工头像">
        <!-- 放置上传图片 -->
        <!-- v-model定义在自己定义的组件
        实现的效果是：
      1. 初始显示图片：如果userInfo.staffPhoto 有值，就显示图案
      2. 修改：用户上传了新的图片之后，把新的地址保存userInfo.staffPhoto
    -->
        <UploadImg v-model="userInfo.staffPhoto" />
        <!-- <UploadImg @input="新值=>保存到staffPhoto" :value="userInfo.staffPhoto" -->

        <!-- 保存个人信息 -->
        <el-form-item>
          <el-button type="primary" @click="hSave">保存更新</el-button>
          <el-button @click="$router.back()">返回</el-button>
        </el-form-item>
      </el-form-item></el-form>
  </div>
</template>
<script>

import { getEmployeeDetail, updateEmployee } from '@/api/employees'

export default {
  data() {
    return {
      userInfo: {
        mobile: '13612345678',
        timeOfEntry: '',
        staffPhoto: 'https://rose-1314477347.cos.ap-chengdu.myqcloud.com/1.jpg'
      }
    }
  },
  created() {
    this.loadEmployeeDetail()
  },
  methods: {
    async doSave() {
      await updateEmployee(this.userInfo)
      this.$message.success('修改成功')
    },
    hSave() {
      // 表单校验
      // if(表单校验){
      this.doSave()
      // }
    },
    async loadEmployeeDetail() {
      //
      const id = this.$route.query.id// 从地址栏拿到id
      if (!id) {
        return
      }
      const res = await getEmployeeDetail(id)
      console.log('res.data', res.data)
      // 数据回填
      this.userInfo = res.data
    }
  }
}
</script>

  <style scoped lang="scss">
    .user-info{
      padding-top:20px;
    }
  </style>
